<template>
  <div>
    <van-cell title="搜索历史">
      <van-icon name="delete-o" v-if="!isDel" @click="isDel = true" />
      <div v-else>
        <span @click="$store.commit('SET_HISTORIES', [])">全部删除 </span>
        <span @click="isDel = false">完成</span>
      </div>
    </van-cell>

    <van-cell
      :title="item"
      v-for="(item, index) in histories"
      :key="index"
      @click="$emit('updateKeywords', item)"
    >
      <van-icon name="close" v-if="isDel" @click="DEL_HISTORIES(index)" />
    </van-cell>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      isDel: false
    }
  },
  methods: {
    ...mapMutations(['DEL_HISTORIES'])
  },
  computed: {
    ...mapState(['histories'])
  }
}
</script>

<style></style>
